<template>
  <div>
      <div class="imgs"  :style="{backgroundImage:`url('${pics[1].s_goods_photos[0].path}')`}"> 
          <div class="login">
              <div class="login-css">
                    <h5>请输入以下信息注册：</h5>
                    <input type="text" placeholder="昵称" v-model="username"  :class="{redborder:usernamered,greenborder:usernamegreen}" @blur="checkusername"><span>{{usernameMsg}}</span>
                    <input type="text" placeholder="手机号码" v-model="phone" :class="{redborder:phonered,greenborder:phonegreen}" @blur="checkphone"><span>{{phoneMsg}}</span>
                    <input type="password" placeholder="密码" v-model="password" :class="{redborder:passwordred,greenborder:passwordgreen}" @blur="checkpassword"><span>{{passwordMsg}}</span>
                    <div>
                        <!-- <p v-show="ps==true">{{msg}}</p> -->
                    </div>
                    <button @click="toregister(checkusername(),checkphone(),checkpassword())">确认</button>
              </div>
          </div>
      </div>

  </div>
</template>

<script>
import {goods,register} from '../assets/request'

export default {
    data(){
        return{
            usernameMsg:'',
            // msg:"",
            passwordMsg:'',
            phoneMsg:'',
            pics:[],
            username:'',
            phone:'',
            password:'',
            ps:'flase',
            phonered:false,
            phonegreen:false,
            passwordred:false,
            passwordgreen:false,
            usernamered:false,
            usernamegreen:false,

        }
    },
    methods:{
        checkphone(){
            const res =  /^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/g || /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/g 
            // const respassword =  /^[a-zA-Z]\w{5,17}$/g
            console.log(this.phone);
            // console.log(res.test(phone));
            if(!res.test(this.phone)){
               this.phoneMsg = '*请输入正确的手机号码'
               this.phonegreen = false
               this.ps = true
               this.phonered = true
               return false
            }else{
                this.phonegreen = true
                this.phoneMsg = ''
                this.phonered = false
                return true
            }
        },
        checkpassword(){
            const respassword =  /^[a-zA-Z]\w{5,17}$/g
            // console.log(res.test(phone));
            if(!respassword.test(this.password)){
               this.passwordMsg = '*密码格式为 字母+数字'
               this.passwordgreen = false
               this.ps = true
               this.passwordred = true
               return false
            }else{
                this.passwordgreen = true
                this.passwordMsg = ''
                this.passwordred = false
                return true
            }
        },
        checkusername(){
            console.log(this.username);
            if(this.username==''){
               this.usernameMsg = '*昵称为必填项'
               this.usernamegreen = false
               this.ps = true
               this.usernamered = true
               return false
            }else{
                this.usernamegreen = true
                this.usernameMsg = ''
                this.usernamered = false
                return true
            }
        },
        async toregister(checkphone,checkpassword,checkusername){
            let flag =  checkphone&&checkpassword&&checkusername==true?true:false
            console.log(flag);
            if(flag){
                try{
                let ress = await register({
                    name:this.username,
                    phone:this.phone,
                    password:this.password
                })
                this.$router.push('/html')

                }catch{
                    this.ps = true
                    this.passwordMsg = '手机号码已注册'
                }
            }
            
        }

    },
    async created(){
        let res = await goods({
            project_id:101
        })
        console.log(res);
        this.pics=res.rows.reverse()
    },
    

}
</script>

<style lang='scss' scoped>
    .imgs{
        width: 100%;
        height: 60vh;
        overflow: hidden;
        background-size: 100% auto;
        background-repeat: no-repeat;
        .login{
            background-color: #fff;
            width: 500px;
            margin: 100px 100px 50px auto;
            float: right;
            position: relative;
            padding: 0 20px 30px;
            min-height: 500px;
            display: flex;
            justify-content: center;
            align-items: center;
            .login-css{
                width: 350px;
                height: 350px;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
            }
        }
    }
    input{
        box-sizing: border-box;
        width: 100%;
        height: 42px;
        line-height: 22px;
        padding: 13px 16px 13px 14px;
        display: block;
        margin: 0 auto;
        background: none;
        border: 1px solid grey;

    }
    button{
        width: 100%;
        height: 50px;
        line-height: 50px;
        display: block;
        margin-bottom: 14px;
        text-align: center;
        font-size: 14px;
        color: #fff;
        cursor: pointer;
        background: #000;
    }
    h5{
        color: black;
        // margin-left: 0;
        text-align: left;
        font-size: 16px;
        font-family: '微软雅黑';
        margin-bottom: 10px;
    }
    .redborder{
        border:1px solid red
    }
    .greenborder{
        border:1px solid green
    }
        p,span{
        color: red;
        height: 10px;
    }
    
</style>